<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>推荐</title>
</head>
<body>
<script th:src="@{/vue/vue3.5.js}"></script>
<script th:src="@{/axios/axios.min.js}"></script>

<div class="search-container" id="app">
    <div class="form">
        <!--搜素框-->
        <div>
            <input placeholder="请输入" class="text" v-model="keyword" @click="autoCompletion"/>
            <button class="button cw-icon" @click="searchBtn">搜索</button>
        </div>
        <!--自动补全提示选择-->
        <div class="autoCompletion-container" v-if="showDig">
            <div class="autoCompletion-list" v-for="(item,index) in autoCompletionDataList" :key="index"
                 @click="autoCompletionClick(item)">
                <span>{{item}}</span>
            </div>

        </div>
    </div>

    <div class="content-container">
        <!--卡片-->
        <div class="box-card" v-for="(item,index) in searchDataList" :key="index">
            <div>
                <img :src="item.img">
            </div>
            <div class="p-price">
                <span>{{item.price}}</span>
            </div>
            <div class="p-content">
                <span>{{item.name}}</span>
            </div>
            <div class="p-shop">
                <span>{{item.shop}} </span>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    const {createApp, ref} = Vue;
    const app = createApp({
        setup() {

            const showDig = ref(false);
            const keyword = ref('');
            const searchDataList = ref([])
            const autoCompletionDataList = ref([])

            const searchBtn = () => {
                axios.get(`/search/0/30/${keyword.value}`)
                    .then(response => {
                        searchDataList.value = response.data
                    })
            }
            const autoCompletion = () => {
                if (keyword.value === '') {
                    return
                }
                axios.get(`/search/autoCompletion/${keyword.value}`)
                    .then(response => {
                        autoCompletionDataList.value = response.data
                        showDig.value = true
                    })
            }
            const handleBlur = () => {
                showDig.value = false
            };
            const autoCompletionClick = (val) => {
                console.log("val:", val)
                keyword.value = val
                handleBlur()
            };

            return {
                keyword,
                searchDataList,
                autoCompletionDataList,
                showDig,
                searchBtn,
                autoCompletion,
                autoCompletionClick
            }
        }

    })
    app.mount('#app');

</script>
<style>
    .search-container {
        margin: 0 auto;
        width: 1200px;

        .form {
            height: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;

            .text {
                float: left;
                width: 500px;
                height: 24px;
                line-height: 24px;
                color: #999;
                padding: 4px;
                margin-bottom: 4px;
                border-width: 2px 0 2px 2px;
                border-color: #f30213;
                border-style: solid;
                outline: 0;
                font-size: 12px;
            }

            .button {
                width: 80px;
                height: 36px;
                font-family: tahoma, arial, Microsoft YaHei, Hiragino Sans GB, "\u5b8b\u4f53", sans-serif;
                background: #f30213;
                border: none;
                border-radius: 0;
                line-height: 1;
                color: #fff;
                font-size: 16px;
                cursor: pointer;
            }

            .cw-icon {
                position: relative;
                cursor: default;
                zoom: 1;
            }
        }

        .content-container {
            border: 1px solid rgb(221, 221, 221);
            width: 100%;
            margin-top: 20px;
            padding: 20px;
            display: flex;
            justify-content: start;
            align-content: center;
            flex-wrap: wrap;

            .box-card {
                width: 220px;
                padding: 5px;
                margin: 10px 4px;

                .p-price {
                    margin-top: 6px;
                    line-height: 22px;
                    height: 22px;

                    span {
                        font-size: 20px;
                        font-weight: normal;
                        color: #e4393c;
                    }
                }

                .p-content {
                    margin-bottom: 8px;
                    color: #666;
                    text-decoration: none;

                    span {
                        font-size: 14px;
                    }
                }

                .p-shop {
                    height: 18px;

                    span {
                        line-height: 18px;
                        font-size: 14px;
                        display: inline-block;
                        max-width: 122px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        color: #666;
                    }
                }
            }

            .box-card:hover {
                border: 1px solid rgb(221, 221, 221);
            }
        }

        .autoCompletion-container {
            width: 590px;
            background: white;
            border: 1px solid #999999;

            .autoCompletion-list {
                padding: 5px;

                span {
                    font-size: 14px;
                    font-weight: normal;
                    color: #999999;
                }

            }

            .autoCompletion-list:hover {
                background: rgb(255, 223, 198);
            }
        }


    }
</style>